﻿@page "/metrics"
@page "/metrics/resource/{applicationName}"
@page "/metrics/resource/{applicationName}/meter/{meterName}"
@page "/metrics/resource/{applicationName}/meter/{meterName}/instrument/{instrumentName}"

@using Aspire.Dashboard.Model.Otlp
@using Aspire.Dashboard.Resources
@using Aspire.Dashboard.Otlp.Model
@using Aspire.Dashboard.Utils
@inject IStringLocalizer<Dashboard.Resources.Metrics> Loc
@inject IStringLocalizer<ControlsStrings> ControlsStringsLoc

<PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.Metrics.MetricsPageTitle)" Loc="@Loc" /></PageTitle>

<div class="metrics-layout">
    <h1 class="page-header">@Loc[nameof(Dashboard.Resources.Metrics.MetricsHeader)]</h1>
    <FluentToolbar Orientation="Orientation.Horizontal">
        <ResourceSelect Resources="_applications"
                        AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]"
                        @bind-SelectedResource="PageViewModel.SelectedApplication"
                        @bind-SelectedResource:after="HandleSelectedApplicationChangedAsync" />
        <FluentIcon slot="end" Icon="Icons.Regular.Size20.Clock" Style="margin-right:5px;" />
        <FluentSelect slot="end" TOption="SelectViewModel<TimeSpan>"
                      Items="@_durations"
                      OptionText="@(c => c.Name)"
                      @bind-SelectedOption="PageViewModel.SelectedDuration"
                      @bind-SelectedOption:after="HandleSelectedDurationChangedAsync"
                      AriaLabel="@Loc[nameof(Dashboard.Resources.Metrics.MetricsSelectADuration)]"/>
    </FluentToolbar>
    <div class="page-content-area">
        @if (PageViewModel.Instruments?.Count > 0)
        {
            <FluentSplitter Style="height:100%" Panel1Size="2fr" Panel2Size="8fr" BarSize="5">
                <Panel1>
                    <FluentTreeView Class="metrics-tree" @bind-CurrentSelected="PageViewModel.SelectedTreeItem" @bind-CurrentSelected:after="HandleSelectedTreeItemChangedAsync">
                        <ChildContent>
                            @foreach (var meterGroup in PageViewModel.Instruments.GroupBy(i => i.Parent).OrderBy(g => g.Key.MeterName))
                            {
                                <FluentTreeItem @key="meterGroup.Key" Text="@meterGroup.Key.MeterName" Data="@meterGroup.Key" title="@meterGroup.Key.MeterName" InitiallyExpanded="true" InitiallySelected="@(PageViewModel.SelectedInstrument == null && meterGroup.Key.MeterName == PageViewModel.SelectedMeter?.MeterName)">
                                    @foreach (var instrument in meterGroup.OrderBy(i => i.Name))
                                    {
                                        <FluentTreeItem @key="instrument" Class="nested" Text="@instrument.Name" Data="@instrument" title="@instrument.Name" InitiallySelected="@(instrument.Name == PageViewModel.SelectedInstrument?.Name && instrument.Parent.MeterName == PageViewModel.SelectedMeter?.MeterName)" />
                                    }
                                </FluentTreeItem>
                            }
                        </ChildContent>
                    </FluentTreeView>
                </Panel1>
                <Panel2>
                    <div class="metrics-content">
                        @if (PageViewModel.SelectedApplication.Id?.InstanceId != null && PageViewModel.SelectedMeter != null && PageViewModel.SelectedInstrument != null)
                        {
                            <ChartContainer
                                ApplicationKey="@(PageViewModel.SelectedApplication.Id.GetApplicationKey())"
                                MeterName="@(PageViewModel.SelectedMeter.MeterName)"
                                InstrumentName="@(PageViewModel.SelectedInstrument.Name)"
                                Duration="PageViewModel.SelectedDuration.Id"
                                ActiveView="@(PageViewModel.SelectedViewKind ?? MetricViewKind.Graph)"
                                OnViewChangedAsync="@OnViewChangedAsync"/>
                        }
                        else if (PageViewModel.SelectedMeter != null)
                        {
                            <h3>@PageViewModel.SelectedMeter.MeterName</h3>
                            <FluentDataGrid Style="max-width:1100px;" Items="@PageViewModel.Instruments.Where(i => i.Parent == PageViewModel.SelectedMeter).OrderBy(i => i.Name).AsQueryable()" GridTemplateColumns="3fr 5fr" TGridItem="OtlpInstrument">
                                <ChildContent>
                                    <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.Metrics.MetricsInsturementNameGridNameColumnHeader)]">
                                        <FluentAnchor Href="@DashboardUrls.MetricsUrl(resource: PageViewModel.SelectedApplication.Name, meter: context.Parent.MeterName, instrument: context.Name)" Appearance="Appearance.Lightweight">
                                            @context.Name
                                        </FluentAnchor>
                                    </TemplateColumn>
                                    <PropertyColumn Title="@Loc[nameof(Dashboard.Resources.Metrics.MetricsInsturementDescriptionGridNameColumnHeader)]" Property="@(c => c.Description)" Class="multiline-text" />
                                </ChildContent>
                            </FluentDataGrid>
                        }
                        else
                        {
                            <p>@Loc[nameof(Dashboard.Resources.Metrics.MetricsSelectInstrument)]</p>
                        }
                    </div>
                </Panel2>
            </FluentSplitter>
        }
        else if (PageViewModel.Instruments == null)
        {
            <div class="empty-content">
                <FluentIcon Icon="Icons.Regular.Size24.ChartMultiple" />&nbsp;@Loc[nameof(Dashboard.Resources.Metrics.MetricsSelectAResource)]
            </div>
        }
        else
        {
            <div class="empty-content">
                <FluentIcon Icon="Icons.Regular.Size24.ChartMultiple" />&nbsp;@Loc[nameof(Dashboard.Resources.Metrics.MetricsNoMetricsForResource)]
            </div>
        }
    </div>
</div>
